<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.type" placeholder="请选择仓库类型" class="platform-select" size="small" @change="changeOption">
          <el-option :label="$t('shipment.allWarehouses')" value=""></el-option>
          <el-option :label="$t('shipment.mercadoFullLocal',{accountType: getMercadoName()})" :value="1"></el-option>
          <el-option :label="$t('shipment.mercadoFullCBT',{accountType: getMercadoName()})" :value="7" v-if="$store.getters.isAuthMKDCBT"></el-option>
          <el-option :label="$t('shipment.falabellaFull')" :value="3" v-if="$store.getters.accountFalabella"></el-option>
          <el-option :label="$t('shipment.shopeeFull')" :value="4" v-if="$store.getters.accountShopee"></el-option>
          <el-option :label="$t('shipment.sheinFull')" :value="5" v-if="$store.getters.accountShein"></el-option>
          <el-option :label="$t('shipment.amazonFull')" :value="6" v-if="$store.getters.accountAmazon"></el-option>
          <el-option :label="$t('shipment.tiktokFull')" :value="8" v-if="$store.getters.accountTikTok"></el-option>
          <el-option :label="$t('shipment.aliexpressFull')" :value="10" v-if="$store.getters.accountAliexpress"></el-option>
        </el-select>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="data"
        border
        v-tableHeight="{bottomOffset: 80}"
        height="100px"
        ref="tableData"
      >
        <el-table-column
          :label="$t('table.shipmentNumber')"
          prop="shipmentNo"
          align="center"
          min-width="250"
          show-overflow-tooltip
          fixed
        >
          <template slot-scope="{row}">
            <diy-link @click="jumpInfo(row)">{{row.shipmentNo}}</diy-link>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.store')"
          prop="accountList"
          align="center"
          min-width="200"
          v-if="false"
        >
          <template slot-scope="{row}">
            <div
              v-for="account in row.accountList"
              :key="account.id"
            >
              <span v-if="$store.getters.platformNum > 1">{{account.accountType}},</span>
              {{account.showName}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.numberOfInboundBoxes')"
          prop="rlBoxNUM"
          align="center"
          width="150"
        >
          <template slot-scope="{row}">
            <tool-tip-shipment-box
              :shipment-box="row.shipmentBox"
              type="RL"
            ></tool-tip-shipment-box>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.warehouse')"
          prop="typeStr"
          align="center"
          width="180"
          v-if="false"
        >
          <template v-slot="{row}">
            {{row.warehouseName || row.typeStr}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.createTime2')"
          prop="createTime"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          :label="$t('table.estimatedTime')"
          prop="estimateTime"
          align="center"
          width="150"
        >
          <template slot-scope="{row}">
            {{row.estimateTime || '-'}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.warehousingTime')"
          prop="confirmTime"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          :label="$t('table.作废时间')"
          prop="cancelTime"
          align="center"
          width="150"
        ></el-table-column>

        <el-table-column
          :label="$t('table.Number of goods received')"
          prop="exSkuNum"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          :label="$t('table.Total quantity of goods received')"
          prop="exGoodsNum"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          :label="$t('table.Warehouse administrator')"
          prop="adminName"
          align="center"
          width="200"
        ></el-table-column>
        <el-table-column
          :label="$t('shipment.总货值（元）')"
          prop="sumGoodsValue"
          align="center"
          width="150"
        >
          <template v-slot="{row}">
            <template v-if="row.status === 1">
              {{row.rlSumGoodsValue}}
            </template>
            <template v-else>
              {{row.exSumGoodsValue}}
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.shipmentType')"
          prop="shipmentType"
          align="center"
          width="150"
        >
          <template v-slot="{row}">
            {{getShipmentTypeStr(row.type,row.subType)}}
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.贴标状态')"
          prop="labelOrder"
          align="center"
          width="150"
        >
          <template v-slot="{row}">
            {{row.labelOrder ? getLabelStatusStr(row.labelOrder.status) : '-'}}
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('table.operate')"
          align="left"
          min-width="200"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-button @click="jumpInfo(row)" type="primary">{{$t('common.view')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-wrap mgt10">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          @current-change="getData"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {cancelShipment, deleteShipment, getShipmentList} from "@/api/shipment";
import {deepCopy, getFalabellaName, getMercadoName, getShopeeName} from "@/utils";
import ToolTipShipmentBox from "@/views/shipment/components/ToolTipShipmentBox.vue";
import {getLabelStatusStr} from "@/utils/labelOrder";
import {getShipmentTypeStr} from "@/utils/shipment";

export default {
  name: "cancelShipmentList",
  components: {ToolTipShipmentBox},
  data(){
    return {
      queryParams: {
        page: 1,
        pageSize: 20,
        type: '',
        status: 1,
        deliver: 0,
        sendType: 1,
        cancel: 1,
      },
      total: 0,
      data: [],
      loading: false,
      delLoading: false,
    }
  },
  created() {
    this.getData()
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableData'].doLayout();
    })
  },
  methods: {
    getShipmentTypeStr,
    getLabelStatusStr,
    getShopeeName,
    getMercadoName,
    getFalabellaName,
    changeOption(){
      this.queryParams.page = 1;
      this.getData()
    },
    getData(){
      this.loading = true;
      getShipmentList(this.queryParams)
        .then(res =>{
          this.loading = false
          this.data = deepCopy(res.data)
          this.total = res.info.total
        })
    },
    jumpInfo(row){
      this.$router.push({
        name: 'shipmentInfo',
        query: {
          id: row.id
        }
      })
    },
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 20px 0 0;
  }
}
.platform-select{
  width: 215px;
}
</style>
